<template>
	<view class="content">
		<view class="chat-type">
			<view class="chat-item" v-for="(item,index) in typeList" :key="index" :style="{background: item.bgcolor}" @click="talke(item.text)">
				<image :src="item.icon" class="chat-icon"></image>
				<view class="chat-title">{{item.title}}</view>
				<text>{{item.text}}</text>
			</view>
		</view>
		<!-- <button @click="talke('我将扮演一个中国律师，帮你解决法律问题')">开始对话</button> -->
	</view>
</template>
 
<script setup>
import { ref,watch,nextTick } from 'vue';
import type0img from '../../static/aichat/Inner box0.png'
import type1img from '../../static/aichat/Inner box1.png'
import type2img from '../../static/aichat/Inner box2.png'
import type3img from '../../static/aichat/Inner box3.png'
import type4img from '../../static/aichat/Inner box4.png'
import type5img from '../../static/aichat/Inner box5.png'
import type6img from '../../static/aichat/Inner box6.png'
import type7img from '../../static/aichat/Inner box7.png'



 const colorList = [
	 '#ffeaea','#ecfeff','#eafff2','#ffe3e3','#fffee3', '#ece3ff', '#ffeaea', '#e9fff2'
 ]





 const typeList = ref([
	 {icon:type3img, title:'随便聊聊', text:'随便聊聊天啦！',bgcolor: colorList[3]},
	 {icon:type0img, title:'律师', text:'我将扮演一个中国律师，帮你解决法律问题', bgcolor: colorList[0]},
	 {icon:type1img, title:'小红书文案写手', text:'我将扮演一个营销大师，帮助您的产品编写文案',bgcolor: colorList[1]},
	 {icon:type2img, title:'未来都市谋杀案', text:'穿梭未来都市，揭开惊天谜案！',bgcolor: colorList[2]},
	 {icon:type4img, title:'古典音乐精灵', text:'我是古典音乐精灵，将乐章之美，转化为指尖下的旋律！',bgcolor: colorList[4]},	
	  {icon:type5img, title:'中英互译', text:'请直接发送你想翻译的中，英文句子，我会为你提供准确的直译和意译，并解析句子结构和重点词汇。',bgcolor: colorList[5]},
	  {icon:type6img, title:'笑话大师', text:'我可以给你讲关于任何东西的笑话哟',bgcolor: colorList[6]},
 ])
 

 
 
 function talke(text) {
	 // uni.navigateTo({
	 // 	url:'/pages/index/index'
	 // })
	 uni.navigateTo({
	 	url: '/pages/index/index?text=' + text,
	 });
 }
 
</script>
 
<style lang="scss" scoped>
.content{
	width: 100%;
	height: 100vh;
	padding: 20px;
	box-sizing: border-box;
}
.chat-type{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	
	.chat-item{
		width: 47%;
		height: 180px;
		box-sizing: border-box;
		padding: 10px;
		border-radius: 10px;
		box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
		margin-bottom: 15px;
		.chat-title{
			font-size: 15px;
			margin: 10px 0px;
		}
		text{
			font-size: 12px;
			color: #b3acac;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
		}
	}
	.chat-icon{
		width: 66px;
		height: 66px;
	}
}
</style>